<template>
  <!-- // 地图 -->
  <div class="homePageCards1">
    <div id="warrmap" style="width: 100%; height: 100%"></div>
    <mapDialog :dialog-visible="isqpzsdt">
      <mapPop v-if="isqpzsdt" @closeMap="isqpzsdt = false" mapId="warrmap998"></mapPop>
    </mapDialog>
  </div>
</template>
<script>
import sjccKey from "@/config/sjmapkey";
import mapDialog from "../../../SystemHomepage/HomePageContent/mapDialog.vue";
import mapPop from "./SjMapPop.vue";
export default {
  name: "ResourceMap",
  components: { mapDialog, mapPop },
  props: {
    mapCenter: {
      type: Array,
      default: () => [112.96730140947924, 30.574022147218216]
    },
    mapZoom: {
      type: Number,
      default: 8
    }
  },
  data: function () {
    return {
      map: null, // 基础地图
      isqpzsdt: false,
      imgUrl1: require("@/assets/img/full.png"),
      imgUrl2: require("@/assets/img/nofull.png"),
      FullScreen: false,
      isFullscreen: false
    };
  },
  beforeDestroy() {
    this.map && this.map.remove();
    this.map = null;
    this.$eventBus.$off("showKcrwMaps");
  },
  mounted() {
    this.initLocalMap();
    this.$eventBus.$on("showKcrwMaps", (rows) => {
      console.log("定位城市", rows);
      this.drawSymbolLayer(rows);
    });
  },
  methods: {
    fullscreen() {
      // 进入全屏
      var docElm = document.querySelector(".homePageCards1"); // 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
      this.FullScreen = !this.FullScreen;
    },
    initLocalMap() {
      const that = this;
      SGMap.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then((res) => {
        this.map = new SGMap.Map({
          // 地图绑定的DOM元素ID
          container: "warrmap",
          // 地图样式
          style: "aegis://styles/aegis/Streets",
          // 默认缩放层级
          zoom: 6,
          // 地图中心点
          center: [114.36730140947924, 30.574022147218216],
          // 地图默认字体
          localIdeographFontFamily: "Microsoft YoHei"
        });

        this.map.on("load", function (e) {
          // 添加一个geojson类型的数据源，并把cluster属性设置为true，sdk会主动添加point_count、point_count_abbreviated属性到这份数据中
          // point_count是当前聚合点个数，point_count_abbreviated聚合点个数的简写
          // 初始化Popup
          that.popupYjDOM = new SGMap.Popup({
            // 是否显示关闭按钮
            closeButton: false,
            closeOnClick: false,
            offset: {
              bottom: [0, 0]
            }
          });
        });
      });
    },
    drawSymbolLayer(rows) {
      if (this.movePointMarker) {
        this.movePointMarker.remove();
        this.movePointMarker = null;
      }
      if (this.map.getLayer("choicePoi")) this.map.removeLayer("choicePoi");
      if (this.map.getSource("choicePoi")) this.map.removeSource("choicePoi");
      const url = require("@/assets/map/renwu.png");
      if (!this.map.hasImage("poi")) {
        this.map.loadImage(url, (error, image) => {
          this.map.addImage("poi", image);
        }
        );
      }
      this.map.addLayer({
        id: "choicePoi",
        type: "symbol",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [113.89716384268814, 30.922291236344122]
                },
                properties: {
                  name: ""
                }
              }
            ]
          }
        },
        layout: {
          "icon-image": "poi",
          "icon-size": 0.7,
          "icon-ignore-placement": true,
          "text-ignore-placement": false,
          "text-field": "{name}",
          "text-size": 12,
          "text-anchor": "top",
          "text-allow-overlap": false,
          "icon-anchor": "bottom",
          "text-offset": [0, 0],
          "text-max-width": 8,
          "text-font": ["Microsoft YaHei Regular"]
        },
        paint: {
          "text-color": "#ff0000",
          "text-halo-color": "#FFFFFF",
          "text-halo-width": 1.33333
        }
      });
      this.map.on("click", "choicePoi", (e) => {
        if (this.movePointMarker) {
          this.movePointMarker.remove();
          this.movePointMarker = null;
        }
        // rows.surveyName = "孝感变电站勘察任务";
        // rows.taskAddress = "孝感变电站";
        const imgurl = require("../../../../assets/img/ckDetail.png");
        const str = `<div style="padding: 6px;background: rgba(255, 255, 255, .9);color: #333;position: relative;border-radius: 5px">
                    <div style="display: flex;align-items: center;padding: 3px;">
                      <img src="${imgurl}" alt="" style="margin-right: 10px;">
                      <span style="font-size: 20px;font-weight: 600;">勘察任务详情</span>
                    </div>
                    <div style="padding: 3px;font-size: 16px;font-weight: 600;">任务名称：${rows.surveyName}</div>
                    <div style="padding: 3px;font-size: 16px;font-weight: 600;">勘察时间：${rows.startTime}</div>
                    <div style="padding: 3px;font-size: 16px;font-weight: 600;">勘察单位：${rows.dutyUnit}</div>
                    <div style="padding: 3px;font-size: 16px;font-weight: 600;">部门班组：${rows.bmbz || ""}</div>
                    <div style="padding: 3px;font-size: 16px;font-weight: 600;">勘察负责人：${rows.kcfzr || ""}</div>
                    <div style="border-bottom: 1px solid #333;margin: 4px 0;"></div>
                    <div id="zntBtn" style="padding: 3px;font-size: 16px;color: #3333CC">查看轨迹</div>
                    </div>`;
        const el = document.createElement("div");
        el.innerHTML = str;
        el.className = "marker";
        this.movePointMarker = new SGMap.Marker(el);
        this.movePointMarker.setLngLat([113.89716384268814, 30.922291236344122]).addTo(this.map);
        el.onclick = (e) => {
          e.stopPropagation();
          if (e.target.id === "zntBtn") {
            this.isqpzsdt = true;
          } else {
            this.movePointMarker.remove();
          }
        };
      });
      // this.map.on("mouseleave", "choicePoi", (e) => {
      //   this.popupYjDOM.remove();
      // });
    }
  }
};
</script>

<style scoped lang="less">
.homePageCards1 {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 5px;

  #map {
    border-radius: 5px;
  }
}

.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}

:deep(.sgmap-popup-content) {
  background-color: #46577c !important;
  padding: 0 !important;
}</style>
